<template>
  <div class="">
    <BasicCard style="margin-top: 20px">
      <BasicVxeTable v-bind="gridOptions"> </BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-top: 20px">
      <BasicVxeTable v-bind="gridOptionsEfc"> </BasicVxeTable>
    </BasicCard>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { columns, columnsEfc } from './data'
  import { getDingDaiDuanData, getLuoShaLiuTouLvTongJiJiLu } from '@/api/shuJuBaoBiao'

  const { t } = useI18n()

  const gridOptions = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.断纱累计时长报表'),
      isCustom: false,
      isExport: false,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `shujubaobiao-pingzhongfenleiribao`, // id用于缓存,务必配置
    maxHeight: 500,
    loading: true,
    columns,
    toolbarConfig: {} // 工具栏
  })

  const gridOptionsEfc = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.落纱留头率报表'),
      isCustom: false,
      isExport: false,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `shujubaobiao-pingzhongfenleiribaoDoff`, // id用于缓存,务必配置
    maxHeight: 500,
    loading: true,
    columns: columnsEfc,
    toolbarConfig: {} // 工具栏
  })

  const timeVal = ref(dayjs().format('YYYY-MM-DD'))
  const getList = () => {
    getDingDaiDuanData({
      Start: dayjs(timeVal.value).format('YYYY-MM-DD') + ' 00:00',
      End: dayjs(timeVal.value).format('YYYY-MM-DD') + ' 23:59'
    })
      .then((res: any) => {
        gridOptions.loading = false
        res.sort((a, b) => {
          return a.start > b.start ? -1 : 1
        })
        gridOptions.data = res.map((value) => {
          return {
            ...value,
            start: value.start == null ? null : dayjs(value.start).format('YYYY-MM-DD HH:mm'),
            end: value.end == null ? null : dayjs(value.end).format('YYYY-MM-DD HH:mm'),
            duration: value.duration == null ? null : Math.round((value.duration / 60) * 100) / 100
          }
        })
      })
      .catch(() => {
        gridOptions.loading = false
      })
  }

  const getDoffList = () => {
    getLuoShaLiuTouLvTongJiJiLu({
      Start: dayjs(timeVal.value).format('YYYY-MM-DD') + ' 00:00',
      End: dayjs(timeVal.value).format('YYYY-MM-DD') + ' 23:59'
    })
      .then((res: any) => {
        gridOptionsEfc.loading = false
        res.doffIntactRate1.sort((a, b) => {
          return a.machineNo - b.machineNo
        })
        let doffIntactRate1Str = res.doffIntactRate1
          .map((val) => {
            return val.machineName
          })
          .join(',')
        res.doffIntactRate2.sort((a, b) => {
          return a.machineNo - b.machineNo
        })
        let doffIntactRate2Str = res.doffIntactRate2
          .map((val) => {
            return val.machineName
          })
          .join(',')
        res.doffIntactRate3.sort((a, b) => {
          return a.machineNo - b.machineNo
        })
        let doffIntactRate3Str = res.doffIntactRate3
          .map((val) => {
            return val.machineName
          })
          .join(',')
        res.doffIntactRate4.sort((a, b) => {
          return a.machineNo - b.machineNo
        })
        let doffIntactRate4Str = res.doffIntactRate4
          .map((val) => {
            return val.machineName
          })
          .join(',')
        gridOptionsEfc.data = [
          {
            doffIntactRate1: doffIntactRate1Str,
            doffIntactRate2: doffIntactRate2Str,
            doffIntactRate3: doffIntactRate3Str,
            doffIntactRate4: doffIntactRate4Str
          }
        ]
      })
      .catch(() => {
        gridOptions.loading = false
      })
  }

  onMounted(() => {
    getList()
    getDoffList()
  })
</script>
